<template>
  <div id="home">
    <div class="banner">
      <banner></banner>
    </div>
    <div class="wrapper">
      <category></category>
      <special-view></special-view>
      <recom-bar></recom-bar>
      <recom-bar></recom-bar>
      <body-banner :url="'@/assets/img/body-banner/banner1.jpg'"></body-banner>
      <recom-bar></recom-bar>
      <body-banner :url="'@/assets/img/body-banner/banner2.jpg'"></body-banner>
      <recom-bar></recom-bar>
    </div>
  </div>
</template>

<script>
  import Banner from '../components/content/banner/Banner.vue'
  import Category from '../components/content/category/Category.vue'
  import SpecialView from '../components/content/specialView/SpecialView.vue'
  import RecomBar from '../components/content/recombar/Recombar.vue'
  import BodyBanner from '../components/content/bodyBanner/BodyBanner.vue'

  export default {
    name: 'home',
    components: {
      Banner,
      Category,
      SpecialView,
      RecomBar,
      BodyBanner
    }
  }
</script>

<style>

  .wrapper {
    width: 85%;
    margin: 0 auto;
    text-align: left;
  }
</style>
